<template>
	<div class="HOME">
		<!-- 导航部分 -->
		<div class="header">
			<!-- LOGO -->
			<div class="logo">
				<i class="iconfont icon-N"></i>
				<i class="iconfont icon-E"></i>
				<i class="iconfont icon-W"></i>
			</div>
			<!-- 搜索栏 -->
			<div class="search" @click="$router.push('/home/search')">
				<i class="iconfont icon-sousuo"></i>
				<span class="router">搜索新闻</span>
			</div>
			<!-- 我的 -->
			<div class="user" @click="toMeFn">
				<i class="iconfont icon-wode"></i>
			</div>
		</div>

		<!-- 栏目部分 -->
		<van-tabs v-model="active" class="home_tabs" sticky swipeable @scroll="scroll">
			<van-tab :title="item.name" v-for="item in categoryList" :key="item.id">

				<!-- 下拉刷新 -->
				<van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
					<!-- List列表分页加载 -->
					<van-list v-model="item.loading" :finished="item.finished" finished-text="没有更多了" @load="onLoad">
						<MyPost v-for="item2 in item.newsList" :key="item2.id" :post="item2">
						</MyPost>
					</van-list>
				</van-pull-refresh>
			</van-tab>
		</van-tabs>

	</div>
</template>

<script>
	import {
		getCategoryAPI
	} from '../apis/category.js'
	import {
		getToken,
		getCate,
		getID
	} from '../utils/localData.js'
	import {
		getPostApi
	} from '../apis/news.js'
	import MyPost from '../components/MyPost.vue'
	export default {
		data() {
			return {
				active: getToken() ? 1 : 0,
				categoryList: getCate() || [],
				//newsList: []
				listScrollTop: 0,
			}
		},

		components: {
			MyPost
		},

		async created() {
			if (this.categoryList.length === 0) {
				//获取头条栏目列表
				const res = await getCategoryAPI();

				this.categoryList = res.data.data;
			} else {
				//已登录加上关注和头条
				//未登录加上头条
				if (getToken()) {
					this.categoryList.unshift({
						id: 0,
						name: "关注",
						is_top: 1
					}, {
						id: 999,
						name: "头条",
						is_top: 1
					});
				} else {
					this.categoryList.unshift({
						id: 999,
						name: "头条",
						is_top: 1
					});
				}

			}
			this.categoryList = this.categoryList.map(item => {
				return {
					...item,
					//为数组中的每个对象加一个空数组，用于存放对应的数据
					newsList: [],
					pageIndex: 1, //每个栏目当前页码
					pageSize: 2, //每一页的数据容量
					loading: false,
					finished: false,
					isLoading: false,

				}
			});
			//根据进入页面的初始ID获取项目内容
			/* 			const activeID = this.categoryList[this.active].id;
						const newsres = await getPostApi({
							category: activeID
						});
						//新闻数据绑定
						//this.newsList = newsres.data.data;
						this.categoryList[this.active].newsList.push(...newsres.data.data); */

			/* 	调用methods封装 */
			this.getNewsData();
		},

		mounted() {
			const vantDom = document.querySelector('.van-sticky');
			vantDom.addEventListener('click', (e) => {
				if (e.target.className.indexOf('van-sticky') !== -1) {
					this.$router.push('/home/category');
				}
			})
		},

		activated() {
			this.$nextTick(()=>{
				const TOP = localStorage.getItem('listScrollTop');
				window.scrollTo({
					top: TOP,
				})
			})
			//const TOP = Number(localStorage.getItem('listScrollTop'));
			//console.log(listDom , TOP);
			//window.scrollTop = 2000;
			
		},
		deactivated() {

			localStorage.setItem('listScrollTop' , this.listScrollTop);
		},

		//监听active下标
		watch: {
			async active() {
				/* const activeID = this.categoryList[this.active].id;
				const newsres = await getPostApi({
					category: activeID
				});
				this.categoryList[this.active].newsList.push(...newsres.data.data); */

				/* 	调用methods封装 */
				if (this.categoryList[this.active].newsList.length === 0) this.getNewsData();
			}
		},

		methods: {
			async getNewsData() {
				/* 				console.log(this.categoryList[this.active]);
								const activeID = this.categoryList[this.active].id;
								const pageIndex = this.categoryList[this.active].pageIndex;
								const pageSize = this.categoryList[this.active].pageSize; */
				const {
					id: category,
					pageIndex,
					pageSize,
					newsList,
				} = this.categoryList[this.active];

				const newsres = await getPostApi({
					category,
					pageIndex,
					pageSize

				});

				if (newsres.data.data.length === 0) {
					this.categoryList[this.active].finished = true;
				}
				newsList.push(...newsres.data.data);
				this.categoryList[this.active].loading = false;
				this.categoryList[this.active].isLoading = false;

			},

			onLoad() {
				this.categoryList[this.active].pageIndex++;
				this.getNewsData();
			},

			onRefresh() {
				this.categoryList[this.active].newsList = [];
				this.categoryList[this.active].pageIndex = 1;
				this.categoryList[this.active].finished = false;
				this.categoryList[this.active].loading = true;
				this.getNewsData();

			},

			toMeFn() {
				const id = getID();
				if (id) {
					this.$router.push({
						path: '/user',
						query: {
							id
						}
					});
				} else {
					this.$router.push('/login')
				}
			},
		
			scroll(e){
				this.listScrollTop = e.scrollTop;
			},
		}

	}
</script>

<style lang="less" scoped>
	.home_tabs {
		/deep/ .van-sticky {
			//position: relative;
			padding-right: 40px;

			&::after {
				content: "+";
				font-size: 35px;
				font-weight: bold;
				background-color: #ffffff;
				color: #777777;
				height: 44px;
				width: 44px;
				text-align: center;
				position: absolute;
				right: 0;
				top: 0;
			}
		}
	}


	.header {
		height: 50px;
		display: flex;
		color: #FFFFFF;
		background-color: #ff2d00;
		align-items: center;

		.logo {
			width: 70px;
			padding-left: 10px;
		}

		.search {
			flex: 1;
			background-color: #ff9176;
			height: 35px;
			border-radius: 20px;
			display: flex;
			justify-content: center;
			align-items: center;

			.icon-sousuo {}

			.router {
				color: #FFFFFF;
				font-size: 15px;
			}
		}

		.user {
			width: 60px;
			text-align: center;

			.icon-wode {
				font-size: 25px;
			}
		}
	}
</style>
